<!--  -->
<template>
  <div class="header">
    <div class="banner">
      <img class="avatar" :src="seller.avatar">
      <div class="description">
        <div class="title">
          <span class="brand"></span>
          {{seller.name}}
        </div>
        <div class="desc">
          {{seller.description}}/{{seller.deliveryTime}}到达
        </div>
        <div class="support" v-if="seller.supports">
          <span class="icon" :class = "classMap[seller.supports[0].type]"></span>
          {{seller.supports[0].description}}
        </div>
        <div class="num" @click="showdet">
          5个<i class="icon-keyboard_arrow_right"></i>
        </div>
      </div>
    </div>
    <div class="bottom">
      <span class="left"></span>
      <span class="detail">{{seller.bulletin}}</span>
      <i class="icon-keyboard_arrow_right" @click="showdet"></i>
    </div>
    <div class="background">
      <img :src="seller.avatar">
    </div>
    <div class="det" v-show="detshow">
      <div class="det-wrap clearfix">
        <div class="det-main">

        </div>
      </div>
      <div class="but">
        <i class="icon-close" @click="cancel"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
      detshow: false
    };
  },
  props: {
    seller: {
      type: Object
    }
  },
  created () {
    this.classMap = [
      'discount',
      'juce',
      'special',
      'piao',
      'safe'
    ];
  },
  components: {},

  computed: {},

  mounted: {},

  methods: {
    showdet () {
      this.detshow = true;
    },
    cancel () {
      this.detshow = false;
    }
  }
}

</script>
<style lang="less" scoped>
  @import '../../common/less/style.less';
  .header{
     background-color: rgba(7, 17, 27, 0.5);
     position: relative;
  }
  .banner{
    font-size: 0;
    color: #fff;
  }
  .banner{
    padding-top: 0.48rem;
    margin-bottom: 0.36rem;
  }
  .banner>.description{
    display: inline-block;
    margin-left: 0.32rem;
  }
  .banner>.avatar{
    width: 1.28rem;
    height: 1.28rem;
    border-radius: 0.1rem;
    margin-left: 0.48rem;
    vertical-align: top;
 }
 .banner .title{
   font-size: 0.32rem;
   vertical-align: top;
   font-weight: bold;
   line-height: 36px;
 }
 .banner .brand{
   @media (-webkit-min-device-pixel-ratio:3) {
     background:url('./brand@3x.png');
   };
   @media (-webkit-min-device-pixel-ratio:2) {
     background:url('./brand@2x.png');
     background-size: 100%;
   }
   display: inline-block;
  width: 0.6rem;
  height: 0.36rem;
 }

 .banner .desc{
   font-size: 0.24rem;
   line-height: 0.24rem;
   height: 0.24rem;
   margin-bottom: 0.1rem;
 }
 .support{
   font-size: 0.2rem;
   line-height: 0.24rem;
   height: 0.24rem;
   vertical-align: bottom;
 }
.icon{
  display: inline-block;
  width: 0.2rem;
  height: 0.2rem;
  margin-right: 0.08rem;
}
.discount{
   background: url('./decrease_2@3x.png');
   background-size: 0.2rem 0.2rem;
 }
.juce{
  background: url('./decrease_2@3x.png')
}
.special{
  background: url('./special_1@3x.png')
}
.piao{
  background: url('./invoice_1@3x.png')
}
.safe{
  background: url('./guarantee_3@3x.png')
}
.bottom{
  height: 0.56rem;
  background: rgba(7, 17, 27, 0.2);
  padding: 0 0.24rem;
  line-height: 0.56rem;
  font-size: 0.2rem;
  color: #fff;
}
.bottom>.left{
  background: url('./bulletin@2x.png');
  display: inline-block;
  width: 0.44rem;
  height: 0.24rem;
  background-size: 100%;
  position: relative;
  top: 0.05rem;
}
.bottom>.detail{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    width: 6rem;
}
.background{
  display: block;
  width: 100%;
  height: 2.68rem;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  filter: blur(10px);
}
.background>img{
  width: 100%;
  height: 100%;
}
.num{
  position: absolute;
  bottom: 0.8rem;
  height: 0.24rem;
  padding: 0.14rem 0.16rem;
  line-height: 0.24rem;
  font-size: 0.2rem;
  right: 0.25rem;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 35%;

}
.num>.icon-keyboard_arrow_right{
  font-size: 0.2rem;
  margin-left: 0.04rem;
}
.bottom>.icon-keyboard_arrow_right{
  font-size: 0.2rem;
  position: absolute;
  bottom: 0.15rem;
  right: 0.24rem;
}
.det{
  background: rgba(0, 0, 0, 0.5);
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.det-wrap{
  min-height: 100%;
}
.det-wrap>.det-main{
  margin-top: 1.28rem;
  padding-bottom: 1.28rem;
}
.but{
  position: relative;
  width: 0.64rem;
  height: 0.64rem;
  margin: -1.28rem auto 0 auto;
  font-size: 0.64rem;
  clear: both;
}
</style>
